<template>
	<!-- <el-upload class="upload-demo" drag action="/api/system/file/" multiple>
		<el-icon class="el-icon--upload"><upload-filled /></el-icon>
		<div class="el-upload__text">拖拽文件到这里 或 <em> 点击上传</em></div>
		<template #tip>
			<div class="el-upload__tip">上传完成后，自动启动学习。</div>
		</template>
	</el-upload> -->
	<div class="body">
		<el-upload
			ref="uploadRef"
			class="upload"
			:limit="1"
			accept=".zip"
			:headers="header"
			:action="uploadUrl"
			:disabled="isUploading"
			:on-progress="handleFileUploadProgress"
			:on-success="handleFileSuccess"
			:auto-upload="false"
			drag
		>
			<i class="el-icon-upload" />
			<div class="el-upload__text">
				将文件拖到此处，或
				<em>点击上传</em>
			</div>
			<template #tip>
				<div class="el-upload__tip" style="color: red">提示：仅允许上传“zip”格式文件！</div>
			</template>
		</el-upload>

		<div class="dialog-footer">
			<el-button type="primary" :disabled="loading" @click="submitFileForm">确 定</el-button>
			<!-- <el-button :disabled="loading" @click="uploadShow = false">取 消</el-button> -->
		</div>
	</div>
</template>

<script lang="ts" setup name="loginLog">
import { onMounted, ref } from 'vue';
import { getBaseURL } from '/@/utils/baseUrl';
import { Session } from '/@/utils/storage';
import { request } from '/@/utils/service';
import { ElMessageBox } from 'element-plus';

let uploadUrl = ref(getBaseURL() + 'api/system/file/');
let header = ref({ Authorization: 'JWT ' + Session.get('token') });
let isUploading = ref(false);
let loading = ref(false);
const uploadRef = ref();

// 文件上传中处理
const handleFileUploadProgress = function (event: any, file: any, fileList: any) {
	isUploading.value = true;
};
// 文件上传成功处理
const handleFileSuccess = function (response: any, file: any, fileList: any) {
	isUploading.value = false;
	loading.value = true;
	uploadRef.value.clearFiles();
	// 是否更新已经存在的用户数据
	return request({
		url: '/api/system/ai_study/startStudy/',
		method: 'post',
		data: {
			url: response.data.url,
		},
	})
		.then((response: any) => {
			loading.value = false;
			ElMessageBox.alert('上传成功', '已启学数据学习', {
				confirmButtonText: 'OK',
				callback: (action: Action) => {
					refreshView();
				},
			});
		})
		.catch(() => {
			loading.value = false;
		});
};

const refreshView = () => {};

// 提交上传文件
const submitFileForm = function () {
	uploadRef.value.submit();
};

// 页面打开后获取列表数据
onMounted(() => {});
</script>

<style scoped lang="scss">
.body {
	margin: 15px;
	padding: 15px;
	.upload {
		width: 600px;
	}
}
</style>
